<template>
  <div class="footer-page goods_info">
    <div class="content">
      <div class="base">
        <h5 class="blue-font">1、商品基础信息</h5>
        <div
          v-for="(item, index) in baseMeta"
          class="flex info_item"
          :key="index"
        >
          <label>{{item.label}}</label>
          <div class="flex-1">
            <template v-if="item.name==='convey_type'">
              <p>寄出{{item.convey_type1}}-归还{{item.convey_type2}}</p>
            </template>
            <template v-else-if="item.name==='service_province'">
              <p>{{goodsInfo.province}}，{{goodsInfo.city}}</p>
            </template>
            <template v-else-if="item.name==='imgurl'">
              <el-image
                style="width:120px;height:120px"
                :src="goodsInfo.imgurl?$globalObj.imgBaseUrl+goodsInfo.imgurl:''"
                :preview-src-list="[$globalObj.imgBaseUrl+goodsInfo.imgurl]"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
            <template v-else-if="item.name==='carousel_images'">
              <el-image
                v-for="(img, index) in goodsInfo.carousel_images"
                :key="index"
                style="width:120px;height:120px;margin-right:10px"
                :src="img?$globalObj.imgBaseUrl+img:''"
                :preview-src-list="[$globalObj.imgBaseUrl+img]"
              >
                <div
                  slot="error"
                  class="image-slot"
                >
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </template>
            <template v-else-if="item.name==='goods_content'">
              <p
                class="detail"
                v-html="goodsInfo.goods_content"
              ></p>
            </template>
            <template v-else-if="item.name==='attribute'">
              <p
                v-for="(attr, index) in goodsInfo.attribute"
                :key="index"
                class="attr_item"
              >
                <span>{{attr.field_title}}:</span>{{attr.field_val}}
              </p>
            </template>
            <template v-else>
              <p>{{goodsInfo[item.name]}}</p>
            </template>
          </div>
        </div>
      </div>
      <div class="meal">
        <h5 class="blue-font">2、商品价格与参数</h5>
        <div
          v-for="meal in goodsInfo.setmeal"
          :key="meal.id"
          class="meal_item"
        >
          <div
            v-for="(item, index) in mealMeta"
            class="flex info_item"
            :key="index"
          >
            <label>{{item.label}}</label>
            <div class="flex-1">
              <template v-if="item.name==='lease_set'">
                <!-- <p>{{meal.lease_set==1?"按天":meal.lease_set==2?"按月":"自定义租期"}}</p> -->
                <table
                  class="lease_table"
                  cellspacing=0
                  v-if="meal.lease_set!=3"
                >
                  <tr>
                    <th>租期</th>
                    <th
                      v-for="lease in meal.spec"
                      :key="lease.id"
                    >{{lease.lease_time}}</th>
                  </tr>
                  <tr>
                    <td>{{meal.lease_set==1?"月租金":"日租金"}}</td>
                    <td
                      v-for="lease in meal.spec"
                      :key="lease.id"
                    >{{lease.day_price}}</td>
                  </tr>
                </table>
                <el-table
                  v-else
                  class="set_table"
                  :data="meal.spec"
                  border
                >
                  <el-table-column
                    align="center"
                    label="期数"
                    width="100px"
                  >
                    <template slot-scope="scope">
                      <span>第{{scope.row.which_period}}期</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="租赁天数"
                    prop="lease_days"
                  />
                  <el-table-column
                    align="center"
                    label="租期间隔"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.withhold_cycle}}天</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="每期租金"
                    width="200"
                    prop="lease_price"
                  />
                </el-table>
              </template>
              <template v-else-if="item.name==='huabei_data'">
                <el-table
                  v-if="meal.huabei_data"
                  class="set_table"
                  :data="meal.huabei_data"
                  border
                >
                  <el-table-column
                    align="center"
                    label="租期设置"
                    width="100px"
                  >
                    <template slot-scope="scope">
                      <span>{{scope.row.lease_term?(scope.row.lease_term+(meal.lease_set==1?'个月':'天')):''}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="center"
                    label="花呗总金额"
                    prop="rent_total"
                  />
                  <el-table-column
                    label="花呗3期承担-承担金额"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{scope.row.three_bear}} {{scope.row.three_fee?'￥'+scope.row.three_fee:''}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="花呗6期承担-承担金额"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{scope.row.six_bear}} {{scope.row.six_fee?'￥'+scope.row.six_fee:''}}
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="花呗12期承担-承担金额"
                    align="center"
                  >
                    <template slot-scope="scope">
                      {{scope.row.twelve_bear}} {{scope.row.twelve_fee?'￥'+scope.row.twelve_fee:''}}
                    </template>
                  </el-table-column>
                </el-table>
              </template>
              <template v-else>
                <p>{{meal[item.name]}}</p>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-footer-btns">
      <el-button
        size="small"
        type="primary"
        @click="$router.back()"
      >关闭</el-button>
    </div>
  </div>
</template>

<script>
import { getGoodsInfo } from "@/api/audit";
export default {
  props: ['goodsId'],
  data() {
    return {
      goodsInfo: {},
      baseMeta: [
        {
          label: "商品品类",
          name: 'cate_name'
        },
        {
          label: "商品名称",
          name: 'title'
        },
        {
          label: "推广关键字",
          name: 'spread_title'
        },
        {
          label: "商品属性",
          name: 'attribute'
        },
        {
          label: "新旧",
          name: 'new_grade'
        },
        {
          label: "租赁标签",
          name: 'rent_label'
        },
        {
          label: "商品封面",
          name: 'imgurl'
        },
        {
          label: "商品图片",
          name: 'carousel_images'
        },
        {
          label: "商品详情",
          name: 'goods_content'
        },
        {
          label: "产品合同类型",
          name: 'pact_type'
        },
        {
          label: "服务城市",
          name: 'service_province'
        },
        {
          label: "租赁地址",
          name: 'service_address'
        },
        {
          label: "运费",
          name: 'transfer_cost'
        },
        {
          label: "配送方式",
          name: 'convey_type'
        }
      ],
      mealMeta: [
        {
          label: "套餐名字",
          name: 'title'
        },
        {
          label: "租期设置",
          name: 'lease_set'
        },
        {
          label: "花呗分期",
          name: 'is_huabei'
        },
        {
          label: "花呗设置",
          name: 'huabei_data'
        },
        {
          label: "数量",
          name: 'quantity'
        },
        {
          label: "押金",
          name: 'foregift'
        },
        {
          label: "是否买断",
          name: 'is_buy_out'
        },
        {
          label: "销售价格",
          name: 'price'
        }
      ]
    }
  },
  methods: {
    getData() {
      getGoodsInfo(this.goodsId).then(res => {
        this.goodsInfo = res || {};
        this.goodsInfo.carousel_images = this.goodsInfo.carousel_images.split(',');
      })
    }
  },
  mounted() {
    document.getElementsByClassName('app-main')[0].scrollTop = 0;
    this.getData();
  }
}
</script>

<style lang="scss" scoped>
.content {
  border: 1px solid #e6e6e6;
}
.base,
.meal {
  padding: 30px;
}
.meal {
  border-top: 1px solid #e6e6e6;
}
.meal_item {
  padding: 20px 0 30px;
}
.meal_item + .meal_item {
  border-top: 1px solid #e6e6e6;
}
.detail {
  width: 500px;
  max-height: 500px;
  overflow: auto;
  min-height: 20px;
  padding-right: 20px;
  /deep/img{
    width: 100%!important;
  }
}
.info_item {
  margin-top: 20px;
  label {
    width: 120px;
    color: #666666;
    text-align: right;
    margin-right: 20px;
  }
}
.attr_item {
  span {
    margin-right: 10px;
  }
  & + .attr_item {
    margin-top: 10px;
  }
}
.lease_table {
  tr {
    height: 40px;
    line-height: 40px;
    &:first-child {
      background: #f5f5f5;
    }
    th,
    td {
      border: 1px solid #e6e6e6;
      width: 100px;
      text-align: center;
      &:not(:first-child) {
        border-left: none;
      }
    }
    th {
      font-weight: normal;
      border-bottom: none;
    }
  }
}
.set_table {
  max-width: 1000px;
}
</style>
